<template>
	<div class="content">
		<div>	
		<h2 class="title">欢迎使用管理平台</h2>
		<el-card class="login_info">
			<template #header>
				<div class="card-header">
					<h3>用户登录</h3>
				</div>
			</template>
			<el-form 
			:model="loginModel"
			:rules="rules">
				<el-form-item prop="UserName">
					<el-input type="text" v-model="loginModel.UserName" placeholder="请输入用户名">
						<template #prefix>
							<el-icon>
								<User/>
								<!-- <IEpUser /> -->
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="Password">
					<el-input type="password" v-model="loginModel.Password" placeholder="请输入密码">
						<template #prefix>
							<el-icon>
								<Lock/>
								<!-- <IEpLock/> -->
							</el-icon>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-link :underline="false"><el-switch v-model="rememberPassword" size="small" class="remember_password"></el-switch></el-link>记住密码
					<el-link type="primary" class="forgot_password">忘记密码</el-link>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="logIn" class="log_in">登录</el-button>
				</el-form-item>
				<el-form-item>
					<span class="forgot_password">没用账号？去<el-link type="primary"  @click="router.push('/Register')">注册</el-link></span>
				</el-form-item>
			</el-form>
		</el-card>
		</div>
	</div>
</template>

<script setup>
	import { useUser } from '@/composable/useUser'
	const {rememberPassword, loginModel, rules, logIn, } = useUser();
	

	// import {Login} from "@api/user";
	// const router = useRouter();
	// const RememberPassword=ref(false);
	// const loginModel = reactive({
	// 	UserName: "",
	// 	Password: "",
	// });
	// const rules=reactive({
	// 	UserName:[{required: true, message: '请输入用户名', trigger: 'blur'}],
	// 	Password:[{required: true, message: '请输入密码', trigger: 'blur'}],
	// });
	// const LogIn =  () => {
	// 	if(!loginModel.UserName){return ElMessage.warning("请输入用户名");}
	// 	if(!loginModel.Password){return ElMessage.warning("请输入密码");}
	// 	Login(loginModel).then(res=>{
	// 		if(res.Status=="ok"){
	// 			router.push("/Home")
	// 		}
	// 	})
	// };
	
</script>
<style scoped>
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.login_info {
		width: 400px;
	}

	.card-header {
		text-align: center;
	}
	.title {
		text-align: center;
		line-height: 40px;
		font-weight: 600;
		font-size: 24px;
		margin-bottom: 20px;
	}
	.remember_password{
		margin-right: 5px;
	}
	.forgot_password{
		display: flex;
		margin-left: auto;
	}
	.log_in{
		width: 100%;
	}
	
</style>
